<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="50%"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicForm, useForm } from '@/components/Form';
  import { MenuType } from '@/enums/fieldsEnum';
  import { formSchema } from './menu.data';
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';

  import {
    apiGetMenuTreeList,
    apiCreateMenu,
    apiUpdateMenu,
    apiCreateMenuAction,
    apiUpdateMenuAction,
  } from '@/api/sys/menu';
  import { MenuTreeListItem } from '@/api/sys/model/menuModel';

  defineOptions({ name: 'MenuDrawer' });

  const emit = defineEmits(['success', 'register']);

  const isUpdate = ref(true);

  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
    labelWidth: 100,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: { lg: 12, md: 24 },
  });

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    resetFields();
    setDrawerProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate;

    if (unref(isUpdate)) {
      setFieldsValue({
        ...data.record,
      });
      updateSchema({
        field: 'menu_type',
        componentProps: {
          disabled: true,
        },
      });
    } else {
      updateSchema({
        field: 'menu_type',
        componentProps: {
          disabled: false,
        },
      });
    }

    const treeData = await apiGetMenuTreeList();
    //treeData.unshift({ menu_name: '顶级菜单', menu_id: 0, children: treeData } as MenuTreeListItem);
    updateSchema({
      field: 'parent_id',
      componentProps: { treeData },
    });
  });

  const getTitle = computed(() => (!unref(isUpdate) ? '新增菜单' : '编辑菜单'));

  async function handleSubmit() {
    // try {
    //   const values = await validate();
    //   setDrawerProps({ confirmLoading: true });
    //   // TODO custom api
    //   console.log(values);
    //   closeDrawer();
    //   emit('success');
    // } finally {
    //   setDrawerProps({ confirmLoading: false });
    // }

    try {
      const values = await validate();
      setDrawerProps({ confirmLoading: true });
      // TODO custom api
      let msg = '';
      let method;

      if (unref(isUpdate)) {
        if (values.menu_type == MenuType.Menu) {
          method = apiUpdateMenu;
          msg = '添加菜单成功';
        } else {
          method = apiUpdateMenuAction;
          msg = '添加菜单操作成功';
        }
      } else {
        if (values.menu_type == MenuType.Menu) {
          method = apiCreateMenu;
          msg = '修改菜单成功';
        } else {
          method = apiCreateMenuAction;
          msg = '修改菜单操作成功';
        }
      }
      values.menu_id = parseInt(values?.menu_id);
      method(values)
        .then(() => {
          closeDrawer();
          emit('success', msg);
        })
        .catch((err) => {
          console.log(err);
        });

      // closeDrawer();
      // emit('success');
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>
